<template>
  <div class="movie">
    <div class="movie-nav">
      <h2 class="nav-title">猫眼电影</h2>
      <ul class="nav-links">
        <li class="nav-link" @mouseenter="movie_left" :class="{active:this.hotShow}">正在热映</li>
        <li class="nav-link" @mouseenter="movie_right" :class="{active:this.comingShow}">即将上映</li>
      </ul>
      <div class="nav-all">
        <span class="text">全部</span>
        <svg class="icon category-icon" aria-hidden="true"><use xlink:href="#icon-gengduo"></use></svg>
      </div>
    </div>
    <div class="movie-body">
      <transition name="hot-fade">
        <div class="movie-hot" @mouseenter="pre_next_show" @mouseleave="pre_next_hide" v-show="this.hotShow">
          <router-link class="movie-link" to="" v-for="(movie, index) in this.movies.hot" :key="index">
            <img class="movie-img" :src="movie.imgSrc" alt="" />
            <div class="movie-info">
              <div class="movie-count">
                <span class="count">{{ movie.count }}</span>
                <span class="look">人想看</span>
                <div class="movie-name">{{ movie.name }}</div>
              </div>
            </div>
            <span class="pre-sell">预售</span>
          </router-link>
        </div>
      </transition>
      <transition name="coming-fade">
        <div class="movie-coming" @mouseenter="pre_next_show" @mouseleave="pre_next_hide" v-show="this.comingShow">
          <router-link class="movie-link" to="" v-for="(movie, index) in this.movies.coming" :key="index">
            <img class="movie-img" :src="movie.imgSrc" alt="" />
            <div class="movie-info">
              <div class="movie-count">
                <span class="count">{{ movie.count }}</span>
                <span class="look">人想看</span>
                <div class="movie-name">{{ movie.name }}</div>
              </div>
            </div>
            <span class="pre-sell">预售</span>
          </router-link>
        </div>
      </transition>
      <div class="movie-pre" v-show="pre_next" @click="movie_left" @mouseenter="pre_next_show" @mouseleave="pre_next_hide">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icon-pre"></use></svg>
      </div>
      <div class="movie-next" v-show="pre_next" @click="movie_right" @mouseenter="pre_next_show" @mouseleave="pre_next_hide">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icon-next"></use></svg>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: {},
      hotShow: true,
      comingShow: false,
      pre_next: false
    };
  },
  created() {
    this.$http.get('/movie').then(resp => {
      this.movies = resp.body;
    });
  },
  methods: {
    pre_next_show() {
      this.pre_next = true;
    },
    pre_next_hide() {
      this.pre_next = false;
    },
    movie_left() {
      if (this.hotShow) return;
      this.hotShow = true;
      this.comingShow = false;
    },
    movie_right() {
      if (this.comingShow) return;
      this.comingShow = true;
      this.hotShow = false;
    }
  }
};
</script>

<style lang="stylus" rel="stylussheet/stylus">
.movie
  .movie-nav
    width 100%
    height 44px
    line-height 44px
    box-sizing border-box
    font-size 0
    color #fff
    border-top-right-radius 5px
    border-top-left-radius 5px
    background linear-gradient(to right, rgb(250, 60, 104) 2%, rgb(254, 70, 77) 97%) rgb(250, 60, 104)
    .nav-title
      display inline-block
      font-size 1.125rem
      margin 0 0.625rem 0 0.8125rem
      vertical-align top
      font-weight 700
      font-family 'MFShangHei-Regular' !important
      cursor pointer
    .nav-links
      display inline-block
      .nav-link
        display inline-block
        font-size 0.875rem
        padding 0 0.3125rem
        line-height 2.75rem
        height 2.75rem
        cursor pointer
        box-sizing border-box
        &.active
          border-bottom 0.3125rem solid #FFFFFF
        &:hover
          border-bottom 0.3125rem solid #FFFFFF
  .movie-body
    position relative
    width 100%
    box-sizing border-box
    padding 1.25rem 0.5625rem
    border 1px solid #E5E5E5
    backgroud #FFFFFF
    height 22.4375rem
    overflow hidden
    .movie-hot
      &.hot-fade-enter-active, &.hot-fade-leave-active
        transition all 0.5s linear
        transform translate3d(0, 0, 0)
      &.hot-fade-enter, &.hot-fade-leave-to
        transform translate3d(-100%, 0, 0)
    .movie-coming
      &.coming-fade-enter-active, &.coming-fade-leave-active
        transition all 0.5s linear
        transform translate3d(0, 0, 0)
      &.coming-fade-enter, &.coming-fade-leave-to
        transform translate3d(100%, 0, 0)
    .movie-hot, .movie-coming
      position absolute
      left 0.5625rem
      top 1.25rem
      font-size 0
      width 100%
      .movie-link
        position relative
        display inline-block
        width 13.375rem
        height 18.5625rem
        margin 0.625rem
        .movie-img
          width 100%
          height 100%
          border-radius 0.25rem
        .movie-info
          position absolute
          width 100%
          left 0
          bottom 0
          font-size 0.75rem
          color #FFFFFF
          border-radius 0.25rem
          background rgba(7, 17, 27, 0.2)
          .movie-count
            padding 0.625rem 0 0.625rem 0.625rem
            .count
              font-size 1rem
              color #fd9827
              font-weight 500
            .look
              font-weight 700
          .movie-name
            font-size 1rem
            padding-top 0.625rem
            white-space nowrap
            width 6.625rem
            overflow hidden
            text-overflow ellipsis
            font-weight 500
        .pre-sell
          position absolute
          right 0.625rem
          bottom 0.625rem
          padding 0.3125rem 0.75rem
          border-radius 6.25rem
          background #ff4949
          font-size 0.875rem
          color #FFFFFF
    .movie-pre
      position absolute
      font-size 1.125rem
      width 2.8125rem
      height 2.8125rem
      line-height 2.8125rem
      text-align center
      border-radius 50%
      background rgba(7, 17, 27, 0.7)
      left 0.625rem
      top 43%
      color #FFFFFF
      font-weight 700
      cursor pointer
    .movie-next
      position absolute
      font-size 1.125rem
      width 2.8125rem
      height 2.8125rem
      line-height 2.8125rem
      text-align center
      border-radius 50%
      background rgba(7, 17, 27, 0.7)
      right 0.625rem
      top 43%
      color #FFFFFF
      font-weight 700
      cursor pointer
</style>
